<script setup lang="ts">
import { ref } from 'vue'
const dialogVisible = ref(false)
const xx = ref()
const openDialog = (row: any) => {
  xx.value = row
  dialogVisible.value = true
}

const closeDialog = () => {
  dialogVisible.value = false
}
defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    class="xxnr-dialog"
    v-model="dialogVisible"
    title="内容详情"
    width="600"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <div class="message-box">
      <div class="message-info">
        {{ xx?.xxnr }}
      </div>
      <span class="time-info">
        {{ xx?.fsrq }}
      </span>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.message-box {
  height: 120px;
  text-indent: 30px;
  padding: 10px;
  border: 1px solid #a9c4df;
  border-radius: 3px;
  .message-info {
    font-size: 16px;
    height: calc(100% - 25px);
    overflow: auto;
  }
  .time-info {
    font-size: 14px;
    float: right;
    margin-top: 5px;
    color: #879bba;
  }
}
</style>
